<template>
  <div class="container">
    <el-row gutter="32">
      <el-col :xs="12" :sm="12" :lg="6">
        <div class="header-card">
          <div class="card-main">
            <div class="header-card-iconBox">
              <svg-icon icon-class="commodityAll" class-name="header-card-icon icon-all"></svg-icon>
            </div>
            <div class="header-card-desc">
              <div class="card-text">
                全部商品
              </div>
              <count-to :start-val="0" :end-val="138" :duration="2000" class="card-num" />
            </div>
          </div>
          <div class="card-bar">
              <div class="bar-inset bar-all" style="width:100%;"/>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6">
        <div class="header-card">
          <div class="card-main">
            <div class="header-card-iconBox">
              <svg-icon icon-class="commodityOn" class-name="header-card-icon icon-on"></svg-icon>
            </div>
            <div class="header-card-desc">
              <div class="card-text">
                已上架
              </div>
              <count-to :start-val="0" :end-val="90" :duration="2000" class="card-num" />
            </div>
          </div>
          <div class="card-bar">
            <div class="bar-inset bar-on" style="width:65.22%;"/>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6">
        <div class="header-card">
          <div class="card-main">
            <div class="header-card-iconBox">
              <svg-icon icon-class="commodityNot" class-name="header-card-icon icon-not"></svg-icon>
            </div>
            <div class="header-card-desc">
              <div class="card-text">
                未上架
              </div>
              <count-to :start-val="0" :end-val="27" :duration="2000" class="card-num" />
            </div>
          </div>
          <div class="card-bar">
            <div class="bar-inset bar-not" style="width:19.56%;"/>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6">
        <div class="header-card">
          <div class="card-main">
            <div class="header-card-iconBox">
              <svg-icon icon-class="commodityOff" class-name="header-card-icon icon-off"></svg-icon>
            </div>
            <div class="header-card-desc">
              <div class="card-text">
                已下架
              </div>
              <count-to :start-val="0" :end-val="21" :duration="2000" class="card-num" />
            </div>
          </div>
          <div class="card-bar">
            <div class="bar-inset bar-off" style="width:15.22%;"/>
          </div>
        </div>
      </el-col>
    </el-row>

    <List/>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'
import List from './components/list.vue'

export default {
  components: {
    CountTo,
    List
  },
  data(){
    return{

    }
  }

}
</script>

<style lang="scss" scoped>
  .container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;

    .header-card {
      margin-bottom: 30px;
      border-radius: 10px;
      font-size: 12px;
      padding:20px 26px 10px 20px;
      // overflow: hidden;
      color: #666;
      background: #fff;
      box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
      border-color: rgba(0, 0, 0, .2);
      user-select: none;
      display:flex;
      flex-direction: column;
      align-items: center;
      $iconAllColor:#47aaff;
      $iconOnColor:#12c974;
      $iconOffColor:#979797;
      $iconNotColor:#ff8b47;

      .card-main{
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;

        .header-card-iconBox {
          transition: all 0.38s ease-out;
          border-radius: 6px;

          .header-card-icon {

          }

          .icon-all{
            font-size: 38px;
            color:$iconAllColor;
          }
          .icon-on{
            font-size: 36px;
            color:$iconOnColor;
          }
          .icon-off{
            font-size: 36px;
            color:$iconOffColor;
          }
          .icon-not{
            font-size: 35px;
            color:$iconNotColor;
          }
        }
        .header-card-desc {
          font-weight: bold;

          .card-text {
            line-height: 18px;
            color: rgba(0, 0, 0, 0.45);
            font-size: 16px;
            margin-bottom: 12px;
          }
          .card-num {
            font-size: 20px;
            float:right;
          }
        }
      }

      .card-bar{
        margin-top:15px;
        width:90%;
        background-color: #e9e9e9;
        height:6px;
        border-radius:3px;
        overflow: hidden;

        .bar-inset{
          height:100%;
          border-radius: 3px;
        }

        .bar-all{
          background-color: $iconAllColor;
        }
        .bar-on{
          background-color: $iconOnColor;
        }
        .bar-not{
          background-color: $iconNotColor;
        }
        .bar-off{
          background-color: $iconOffColor;
        }
      }

    }


  }
</style>
